<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <div id="boss">
        <div id="header">
            <div class="inner">
                <h1 class="logo">
                    <a href=""></a>
                    <span>boss直聘</span>
                </h1>
            </div>
        </div>
        <div id="main"></div>
        <div class="intro-wrap">
            <h3>打造多种模式的招聘服务，满足招人多样化需求</h3>
            <div class="boss-intro-info">
                <div class="intro-box">
                    <!-- <div class="intro-item"> -->
                    <!-- <img src="./img/item-1.png" />
                        <dl>
                            <dt>视频面试</dt>
                            <dd>不受地域限制，不受传统的上班时间影响，即可连线全球优秀人才。支持3v1多人群面，在线商议结果，进一步提升面试效率</dd>
                    </dl> -->
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>Copyright © 2020 zhipin.com 京ICP备14013441号-5</p>
        </div>
    </div>
    <script>
        var list = [{
            url: './img/item-1.png',
            title: "视频面试",
            text: "不受地域限制，不受传统的上班时间影响，即可连线全球优秀人才。支持3v1多人群面，在线商议结果，进一步提升面试效率"
        }, {
            url: './img/item-2.png',
            title: "语音聊天",
            text: "BOSS可选择和求职者语音沟通，能及时快速查看是否符合职位要求"
        }, {
            url: './img/item-3.png',
            title: "聊天发送位置",
            text: "可向求职者发送公司定位或工作地址，在线查看通勤路线与时间，求职者一目了然"
        }, {
            url: './img/item-4.png',
            title: "线上offer",
            text: "线上OFFER一键速递，可对沟通后的求职者发送线上OFFER，便捷高效揽获求职者"
        }, {
            url: './img/item-5.png',
            title: "求职者转发",
            text: "BOSS可以将求职者通过站内、站外转发给同事，连同附件简历，可同时发送查看"
        }]

        var cen = document.querySelector(".intro-item")
        // 获取元素
        var goodslist = document.querySelector('.intro-box');

        var content = `<div class="intro-item"> `;

        // 遍历数据，生成li
        for (var i = 0; i < list.length; i++) {

            goodslist.innerHTML += `<div class="intro-item">
                   <img src="${list[i].url}"/>
                   <dl>
                            <dt>${list[i].title}</dt>
                            <dd>${list[i].text}</dd>
                        </dl> 
                        </div>
        `
        }

        // 闭合ul
        content += `</div>`;

        console.log(content)
    </script>
    </div>
</body>

</html>